<template>
  <div class="projects-container">
    <!-- 头部基础信息 -->
    <div class="header">
      <div class="site-info">
        <div class="site-icon">🏢</div>
        <div class="site-details">
          <div class="site-name">{{ currentSite.name || '全部站点' }}</div>
          <div class="site-id">站点ID: {{ siteId || '未指定' }}</div>
        </div>
      </div>
      <!-- <div class="action-buttons">
          <button class="create-button" @click="openDialog('create')">
            <span class="create-icon">+</span> 创建新项目
          </button>
        </div> -->
    </div>

    <!-- 搜索筛选区域 -->
    <!-- <div class="search-section">
        <div class="filter-row">
          <div class="filter-item">
            <div class="filter-label">项目名称:</div>
            <el-input 
              v-model="searchParams.play_name" 
              placeholder="输入项目名称" 
              clearable 
              style="width: 200px;"
            />
          </div>
          
          <div class="filter-item">
            <div class="filter-label">项目类型:</div>
            <el-select 
              v-model="searchParams.play_type" 
              placeholder="全部类型" 
              clearable
              style="width: 150px;"
            >
              <el-option label="体验/打卡" :value="1" />
              <el-option label="闯关/完成项目" :value="2" />
              <el-option label="直接兑奖项目" :value="3" />
              <el-option label="兑换/核销奖品" :value="4" />
              <el-option label="留资项目" :value="5" />
            </el-select>
          </div>
          
          <div class="filter-item">
            <div class="filter-label">项目状态:</div>
            <el-select 
              v-model="searchParams.status" 
              placeholder="全部状态" 
              clearable
              style="width: 120px;"
            >
              <el-option label="启用" :value="1" />
              <el-option label="停用" :value="0" />
            </el-select>
          </div>
          
          <div class="filter-item">
            <el-button type="primary" @click="fetchProjects">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </div>
      </div> -->

    <!-- 项目列表表格 -->
    <div class="project-table">
      <div class="table-header">
        <div class="table-title">活动项目列表</div>
        <div class="table-actions">
          <div class="create-button" @click="openDialog('create')">
            <span class="create-icon">+</span> 新建项目
          </div>
        </div>
      </div>

      <el-table :data="projectList" style="width: 100%;">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column label="项目名称">
          <template #default="{ row }">
            <div style="font-weight: 500;">{{ row.play_name }}</div>
          </template>
        </el-table-column>
        <!-- 将原"类型"列重命名为"项目类型" -->
        <el-table-column label="项目类型" width="180">
          <template #default="{ row }">
            <div class="type-tag" :class="'type-' + row.play_type">
              {{ getTypeText(row.play_type) }}
            </div>
          </template>
        </el-table-column>
        <!-- 新增：抽奖类型列 -->
        <el-table-column label="抽奖类型" width="180">
          <template #default="{ row }">
            <!-- 判断项目类型是否为直接兑奖项目或兑奖/核销奖品 -->
            <div v-if="[3, 4].includes(row.play_type)" class="type-tag" :class="'type-' + row.play_type">
              {{ getDrawTypeText(row.draw_type) }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <el-table-column label="奖励积分" width="150">
          <template #default="{ row }">
            <div :class="row.total >= 0 ? 'reward-positive' : 'reward-negative'">
              {{ row.total >= 0 ? '+' : '' }}{{ row.total }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="参与规则" width="180">
          <template #default="{ row }">
            <div style="display: flex; flex-direction: column; gap: 5px;">
              <div class="rule-badge">
                {{ getRuleText(row.rule) }}
              </div>
              <div v-if="row.rule !== 0" style="font-size: 12px; color: #909399;">
                可体验: {{ row.play_total }}次
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="130">
          <template #default="{ row }">
            <!-- <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                active-color="#13ce66"
                @change="toggleStatus(row)"
              /> -->
            <div :class="row.status == 1 ? 'reward-positive' : 'reward-negative'"> {{ row.status == 1 ? '启动' : '停用' }}
            </div>

          </template>
        </el-table-column>
        <!-- 新增：库存处理列 -->
        <!-- <el-table-column label="库存处理" width="150" v-if="showStockStatusColumn">
          <template #default="{ row }">
            <div v-if="row.draw_type > 0">
              {{ row.draw_stock_status === 1 ? '可重抽' : '不可重抽' }}
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column> -->


        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <div class="action-buttons">
              <button class="edit" @click="openDialog('edit', row)">编辑</button>
              <!-- <button @click="confirmDelete(row)">删除</button> -->
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- <div style="padding: 15px 20px; display: flex; justify-content: flex-end;">
          <el-pagination
            v-model:current-page="pagination.current"
            v-model:page-size="pagination.size"
            :total="pagination.total"
            layout="prev, pager, next, jumper"
            @current-change="fetchProjects"
          />
        </div> -->
    </div>

    <!-- 创建/编辑项目对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogType === 'create' ? '创建新项目' : '编辑项目'" width="650px">
      <div class="dialog-form">
        <el-form ref="projectForm" :model="formData" :rules="formRules" label-width="120px">
          <el-form-item label="项目名称" prop="play_name">
            <el-input v-model="formData.play_name" placeholder="输入项目名称" />
          </el-form-item>

          <div class="form-row">
            <div class="form-col">
              <el-form-item label="项目类型" prop="play_type">
                <el-select v-model="formData.play_type" placeholder="请选择项目类型" @change="handlePlayTypeChange">
                  <el-option label="体验/打卡" :value="1" />
                  <el-option label="闯关/完成项目" :value="2" />
                  <el-option label="直接兑奖项目" :value="3" />
                  <el-option label="兑换/核销奖品" :value="4" />
                  <el-option label="留资项目" :value="5" />
                </el-select>
              </el-form-item>
            </div>

            <div class="form-col">
              <el-form-item label="奖励积分" prop="total">
                <el-input-number v-model="formData.total" :min="-10000" :max="10000" :step="10" placeholder="输入积分值" />
                <div class="p-l-20" style="font-size: 12px; color: #909399; margin-top: 5px;">
                  正数表示奖励，负数表示扣除
                </div>
              </el-form-item>
            </div>
          </div>

          <el-form-item label="参与规则" prop="rule">
            <el-select v-model="formData.rule" placeholder="请选择参与规则">
              <el-option label="无限参与" :value="0" />
              <el-option label="每个展览可体验" :value="1" />
              <el-option label="每天可体验" :value="2" />
            </el-select>
          </el-form-item>

          <div v-if="formData.rule !== 0" class="rule-link">
            <el-form-item label="可体验次数" prop="play_total">
              <el-input-number v-model="formData.play_total" :min="1" :max="100" placeholder="输入次数" />
            </el-form-item>
          </div>

          <!-- 新增：抽奖类型选择 -->
          <el-form-item label="抽奖类型" prop="draw_type" v-if="[4, 3].includes(formData.play_type)">
            <el-select v-model="formData.draw_type" placeholder="请选择抽奖类型">
              <el-option label="无奖品" :value="0" />
              <el-option label="库存抽奖" :value="1" />
              <el-option label="固定概率抽奖" :value="2" />
              <el-option label="二级(库存抽奖)" :value="3" />
              <el-option label="二级(固定概率)" :value="4" />
              <el-option label="自选礼品" :value="5" />
              <el-option label="大奖(概率随未中奖数升高而升高，中奖后恢复概率)" :value="6" />
            </el-select>
          </el-form-item>

          <!-- 新增：中奖常数输入框（仅大奖类型显示） -->
          <el-form-item label="中奖常数" prop="constant" v-if="formData.draw_type === 6">
            <el-input v-model="formData.constant" placeholder="输入中奖常数" type="number" />
            <div class="p-l-20" style="font-size: 12px; color: #909399; margin-top: 5px;">
              用于计算大奖概率的常数参数
            </div>
          </el-form-item>

          <!-- 新增：库存处理开关（仅当抽奖类型为库存类时显示） -->
          <el-form-item label="无库存可重抽" prop="draw_stock_status" v-if="[4, 3].includes(formData.play_type)">
            <el-switch v-model="formData.draw_stock_status" :active-value="1" :inactive-value="0" active-text="是"
              inactive-text="否" />
            <div class="p-l-20" style="font-size: 12px; color: #909399; margin-top: 5px;">
              当奖品库存不足时，用户是否可以重新抽奖
            </div>
          </el-form-item>

          <!-- 新增：拼接项目ID输入框 -->
          <el-form-item label="拼接项目ID" prop="condition">
            <el-input v-model="formData.condition" placeholder="输入拼接项目ID" />
            <div class="p-l-20" style="font-size: 12px; color: #909399; margin-top: 5px;">
              (与)用"&"拼接项目ID，(或)用"|"拼接项目ID 如: 31&32|33
            </div>
          </el-form-item>

          <!-- 新增：是否使用核销码选择 -->
          <el-form-item label="使用核销码" prop="check_code_status"><el-switch v-model="formData.check_code_status" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" /></el-form-item>

          <!-- 新增：核销码输入框（仅当使用核销码时显示） -->
          <el-form-item label="核销码" prop="check_code" v-if="formData.check_code_status === 1">
            <el-input v-model="formData.check_code" placeholder="输入核销码" type="number" :maxlength="6" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0,6)" /> 
          </el-form-item>

          <el-form-item label="项目状态" prop="status">
            <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" active-text="启用"
              inactive-text="停用" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitProject">
          {{ dialogType === 'create' ? '创建' : '更新' }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import http from "../libs/http";
import { useRoute } from 'vue-router';
const route = useRoute();

// 当前基础信息
const siteId = ref('');
const currentSite = reactive({
  id: '',
  name: ''
});

// 项目列表数据
const projectList = ref([]);

// 分页参数
const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
});

// 搜索参数
const searchParams = reactive({
  play_name: '',
  play_type: null,
  status: null
});

// 对话框控制
const dialogVisible = ref(false);
const dialogType = ref('create'); // 'create' or 'edit'

// 表单数据
const formData = reactive({
  id: 0,
  activity_id: 0,
  play_name: '',
  play_type: 1,
  total: 0,
  rule: 0,
  play_total: 0,
  status: 1,
  draw_type: 0,       // 新增字段：抽奖类型
  draw_stock_status: 0, // 新增字段：库存处理
  constant: '',
  condition: '',
  check_code_status: 0, // 新增字段：是否使用核销码
  check_code: ''        // 新增字段：核销码
});
// 计算属性：是否显示库存状态列
const showStockStatusColumn = computed(() => {
  return projectList.value.some(item => [1, 3].includes(item.draw_type));
});

// 项目类型变更处理
const handlePlayTypeChange = () => {
  // 当项目类型不是直接兑奖(3)和兑换核销(4)时，默认抽奖类型为无奖品(0)
  if (![3, 4].includes(formData.play_type)) {
    formData.draw_type = 0;
    formData.draw_stock_status = 0;
  }
};

// 工具函数：获取抽奖类型文本
const getDrawTypeText = (type) => {
  console.log(type,'>>>>??????><><<')
  const types = {
    0: '无奖品',
    1: '库存抽奖',
    2: '固定概率',
    3: '二级(库存)',
    4: '二级(固定)',
    5: '自选礼品',
    6: '大奖(动态概率)'
  };
  return types[type] || '未知类型';
};
// 表单验证规则
const formRules = reactive({
  play_name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
  ],
  play_type: [
    { required: true, message: '请选择项目类型', trigger: 'change' }
  ],
  total: [
    { required: true, message: '请输入奖励积分', trigger: 'blur' }
  ],
  rule: [
    { required: true, message: '请选择参与规则', trigger: 'change' }
  ],
  play_total: [
    {
      required: true,
      message: '请输入可体验次数',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (formData.rule !== 0 && !value) {
          callback(new Error('请输入可体验次数'));
        } else {
          callback();
        }
      }
    }
  ],
  draw_type: [
    { required: true, message: '请选择抽奖类型', trigger: 'change' }
  ],
  draw_stock_status: [
    {
      required: true,
      message: '请选择库存处理方式',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value === undefined || value === null) {
          callback(new Error('请选择库存处理方式'));
          return;
        }
        callback();
      }
    }
  ],
  // 新增：中奖常数验证规则
  constant: [
    {
      required: true,
      message: '请输入中奖常数',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (formData.draw_type === 6 && (value === undefined || value === null || value === '')) {
          callback(new Error('请输入中奖常数'));
        } else if (formData.draw_type === 6 && (isNaN(Number(value)) || Number(value) <= 0)) {
          callback(new Error('中奖常数必须为正数'));
        } else {
          callback();
        }
      }
    }
  ],
  // 新增：拼接项目ID验证规则
  condition: [
    { pattern: /^[\d&|]+$/, message: '只能包含数字、&和|', trigger: 'blur' },
    { validator: (rule, value, callback) => {
        if (value && !/^[\d&|]+$/.test(value)) {
          callback(new Error('格式应为数字&数字|数字，如：31&32|33'));
        } else {
          callback();
        }
      }, trigger: 'blur'
    }
  ],
  // 新增：是否使用核销码验证规则
  check_code_status: [
    {required: false, message: '请选择是否使用核销码', trigger: 'change' }
  ],
  // 新增：核销码验证规则
  check_code: [
    {
      message: '请输入1-6位数字',
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (formData.check_code_status === 1) {
          if (!value) {
            callback(new Error('请输入核销码'));
          } else if (!/^\d{1,6}$/.test(value)) {
            callback(new Error('请输入1-6位数字'));
          } else {
            callback();
          }
        } else {
          callback();
        }
      }
    }
  ]
});
// 获取当前站点名称
const getCurrentSiteName = () => {
  const siteAdminList = JSON.parse(localStorage.getItem('siteAdminList')) || [];
  const site = siteAdminList.find(s => s.id == siteId.value);
  return site ? site.activity_name : '全部站点';
};
// 获取项目列表
const fetchProjects = async () => {
  // 字符串转数字
  try {
    // 模拟API请求
    const token = localStorage.getItem("openid");
    const params = {
      token,
      activity_id: Number(siteId.value),
      //   page: pagination.current,
      //   pageSize: pagination.size,
      //   ...searchParams
    };

    // 实际调用: 
    const response = await http.$post('/hd_project/Backend/getProjectList', params);
    const mockData = response;
    currentSite.name = getCurrentSiteName(); // 设置当前站点名称

    if (mockData.code === 200) {
      projectList.value = mockData.data;
      //   pagination.total = mockData.data.total;
      ElMessage.success(`加载了 ${mockData.data.length} 个项目`);
    } else {
      ElMessage.error('获取项目列表失败');
    }

  } catch (error) {
    console.error('获取项目列表错误:', error);
    ElMessage.error('获取项目列表失败');
  }
};

// 重置搜索
const resetSearch = () => {
  searchParams.play_name = '';
  searchParams.play_type = null;
  searchParams.status = null;
  pagination.current = 1;
  fetchProjects();
};

// 打开对话框 (创建或编辑)
const openDialog = (type, row = null) => {
  dialogType.value = type;

  if (type === 'create') {
    // 重置表单数据 - 添加所有表单字段的初始化
    Object.assign(formData, {
      id: 0,
      activity_id: siteId.value,
      play_name: '',
      play_type: 1,
      total: 0,
      rule: 0,
      play_total: 0,
      status: 1,
      draw_type: 0,       // 新增字段初始化
      draw_stock_status: 0, // 新增字段初始化
      constant: '',        // 新增字段初始化
      condition: '',        // 新增字段初始化
      check_code_status: 0, // 新增字段：是否使用核销码
      check_code: ''        // 新增字段：核销码
    });
  } else if (type === 'edit' && row) {
    // 填充表单数据 - 添加所有表单字段的赋值
    Object.assign(formData, {
      id: row.id,
      activity_id: row.activity_id,
      play_name: row.play_name,
      play_type: row.play_type,
      total: row.total,
      rule: row.rule,
      play_total: row.play_total,
      status: row.status,
      draw_type: row.draw_type || 0,       // 新增字段赋值
      draw_stock_status: row.draw_stock_status || 0, // 新增字段赋值
      constant: row.constant || '',        // 新增字段赋值
      condition: row.condition || '',        // 新增字段赋值
      check_code_status: row.check_code_status || 0, // 新增字段：是否使用核销码
      check_code: row.check_code || ''        // 新增字段：核销码
    });
  }

  dialogVisible.value = true;
};

// 提交项目 (创建或更新)
const submitProject = async () => {
  try {
    // 表单验证
    // 实际调用: await this.$refs.projectForm.validate();

    // 准备提交数据
    const token = localStorage.getItem("openid");
    // 当不使用核销码时强制清空核销码值
    if (formData.check_code_status === 0) {
      formData.check_code = '';
    }
    if (formData.draw_type != 6) {
      formData.constant = '';
    }

    const params = {
      token,
      ...formData
    };

    // 模拟API请求
    const response = await http.$post('/hd_project/Backend/editProject', params);
    const mockResponse = response;

    // // 模拟响应
    // const mockResponse = {
    //   code: 200,
    //   message: dialogType.value === 'create' ? '创建成功' : '更新成功'
    // };

    if (mockResponse.code === 200) {
      ElMessage.success(mockResponse.message);
      dialogVisible.value = false;
      fetchProjects(); // 重新获取项目列表
    } else {
      ElMessage.error('操作失败');
    }

  } catch (error) {
    console.error('提交项目错误:', error);
    ElMessage.error('操作失败');
  }
};

// 切换项目状态
const toggleStatus = async (project) => {
  try {
    // 模拟API调用
    const token = localStorage.getItem("openid");
    const params = {
      token,
      id: project.id,
      status: project.status
    };

    // 实际调用: 
    // await axios.post('/hd_project/Backend/updateProjectStatus', params);

    ElMessage.success(`项目已${project.status === 1 ? '启用' : '停用'}`);
    fetchProjects(); // 重新获取项目列表
  } catch (error) {
    console.error('更新状态失败:', error);
    ElMessage.error('操作失败');
    // 恢复原始状态
    project.status = project.status === 1 ? 0 : 1;
  }
};

// 确认删除项目
const confirmDelete = (project) => {
  ElMessageBox.confirm(`确定要删除项目 "${project.play_name}" 吗？`, '删除确认', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      // 模拟API调用
      const token = localStorage.getItem("openid");
      const params = {
        token,
        id: project.id
      };

      // 实际调用: 
      // await axios.post('/hd_project/Backend/deleteProject', params);

      ElMessage.success('项目已删除');
      fetchProjects();
    } catch (error) {
      console.error('删除项目失败:', error);
      ElMessage.error('删除失败');
    }
  }).catch(() => { });
};

// 工具函数：获取类型文本
const getTypeText = (type) => {
  const types = {
    1: '体验/打卡',
    2: '闯关/完成',
    3: '直接兑奖',
    4: '兑换/核销',
    5: '留资项目' 
  };
  return types[type] || '未知类型';
};

// 工具函数：获取规则文本
const getRuleText = (rule) => {
  const rules = {
    0: '无限参与',
    1: '每展可体验',
    2: '每天可体验'
  };
  return rules[rule] || '未知规则';
};

// 初始化：获取URL参数
const initSiteInfo = () => {
  // 实际应从URL获取site参数
  const urlParams = new URLSearchParams(window.location.hash.split('?')[1]);
  const siteParam = urlParams.get('site');

  if (siteParam) {
    siteId.value = siteParam;
    currentSite.id = siteParam;
    currentSite.name = `站点 ${siteParam}`;
  }
};

// 初始化
onMounted(() => {
  initSiteInfo();
  fetchProjects();
  currentSite.name = getCurrentSiteName(); // 设置当前站点名称
});
</script>

<style scoped>
body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
}

.projects-container {
  height: 75vh;
  overflow: auto;
  max-width: 80vw;
  margin: 20px auto;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  border-radius: 8px;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.site-info {
  display: flex;
  align-items: center;
}

.site-icon {
  font-size: 24px;
  margin-right: 10px;
}

.site-details {
  line-height: 1.4;
}

.site-name {
  font-size: 18px;
  font-weight: 600;
}

.site-id {
  font-size: 14px;
  opacity: 0.9;
}

.action-buttons {


  display: flex;
  gap: 10px;
}

.search-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
}

.filter-label {
  margin-right: 10px;
  font-weight: 500;
  color: #606266;
}

.project-table {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #f8fafc;
  border-bottom: 1px solid #ebeef5;
}

.table-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.create-button {
  background: linear-gradient(135deg, #1e5799 0%, #2989d8 100%);
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.create-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(41, 137, 216, 0.3);
}

.create-icon {
  margin-right: 6px;
}

.status-active {
  display: inline-block;
  padding: 4px 10px;
  background-color: #e1f3d8;
  color: #67c23a;
  border-radius: 20px;
  font-size: 12px;
}

.status-inactive {
  display: inline-block;
  padding: 4px 10px;
  background-color: #fde2e2;
  color: #f56c6c;
  border-radius: 20px;
  font-size: 12px;
}

.type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.type-1 {
  background: #ecf5ff;
  color: #409eff;
}

.type-2 {
  background: #f0f9eb;
  color: #67c23a;
}

.type-3 {
  background: #fdf6ec;
  color: #e6a23c;
}

.type-4 {
  background: #fef0f0;
  color: #f56c6c;
}

.type-5 {
  background: #f1f3f6;
  color: #08b9d1;
}

.rule-badge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #f0f2f5;
  color: #606266;
}

.reward-positive {
  color: #67c23a;
  font-weight: 500;
}

.reward-negative {
  color: #f56c6c;
  font-weight: 500;
}

.action-buttons button {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: all 0.3s;
}

.action-buttons button:hover {
  border-color: #c0c4cc;
  background: #f5f7fa;
}

.action-buttons button.edit {
  color: #409eff;
  border-color: #a0cfff;
  background: #ecf5ff;
}

.action-buttons button.edit:hover {
  background: #d9ecff;
}

.dialog-form {
  padding: 20px;
}

.form-row {
  /* display: flex; */
  flex-wrap: wrap;
  margin: 0 -10px;
}

.form-col {
  flex: 0 0 50%;
  /* max-width: 50%; */
  padding: 0 10px;
  margin-bottom: 20px;
}

.rule-link {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.required-label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

@media (max-width: 992px) {
  .form-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-item {
    width: 100%;
    margin-bottom: 10px;
  }
}


.type-0 {
  background: #f0f2f5;
  color: #909399;
}

.type-1 {
  background: #ecf5ff;
  color: #409eff;
}

.type-2 {
  background: #f0f9eb;
  color: #67c23a;
}

.type-3 {
  background: #fdf6ec;
  color: #e6a23c;
}

.type-4 {
  background: #fef0f0;
  color: #f56c6c;
}
</style>